<template>
  <div>
    <van-slider v-model="value" range @change="onChange" :step="1" max="8" min="0" @drag-start='onInput' />
    <!-- 滑动的图片 -->
    <div class="bg" :style="{left:left}">{{ min }}~{{ max }}万</div>
    <!-- 双滑块的详细信息 -->
    <div class="detail">
      <span>0</span>
      <span>滑动选择人均预算</span>
      <span>8</span>
    </div>
  </div>
</template>

<script>
// 引入vant组件
import Vue from "vue";
import { Toast, Slider } from "vant";
Vue.use(Toast);
Vue.use(Slider);

export default {
  data() {
    return {
      // 双滑块模式时，值必须是数组
      value: [2,4],
      min: 2,
      max: 4,
      // 定位左边的偏移量
      left:'20%'
    }
  },
  methods: {
    onChange(value) {
      // 传过来的value值是一个数组
      // Toast('当前值：' + value);
      this.min = value[0];
      this.max = value[1];
      // 传入vuex
      this.$store.commit('rational/setmoney',value)

    },
    onInput(){
      // console.log(document.querySelector('.van-slider__button'));
      let leftRadio = document.querySelector('.van-slider__bar')
      this.left = leftRadio.style.left
      console.log(this.left);
    }
  },
};
</script>

<style scoped>
.detail {
  margin: 0 auto;
  width: 290px;
  display: flex;
  justify-content: space-between;
  position: relative;
  top: -52px;
  color: #b2b2b2;
}
.bg {
  width: 97px;
  height: 72px;
  background: url("../../assets/img/mg.png") center no-repeat;
  background-size: 90px;
  display: inline-block;
  text-align: center;
  line-height: 60px;
  position: relative;
  top: -86px;
}
</style>
